import {AxiosResponse} from "axios";
import {Form, Input, Button, message} from 'antd';
import {LockOutlined} from '@ant-design/icons';
import {useNavigate} from 'react-router-dom';
import qs from 'qs';
import axios from '../../api/request'
import './style.css'

interface FormFields {
  password: string
}

const LoginForm = () => {
  const navigate = useNavigate();
  const onFinish = (values: FormFields) => {
    axios.post('/api/login', qs.stringify(values)).then((res: AxiosResponse<responseResult.login>) => {
      if (res.code === 200) {
        navigate('/')
      } else {
        message.error(res.msg);
      }
    })
  };
  
  return (
    <div className="login-page">
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
      >
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: 'Please input your Password!',
            },
          ]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon"/>}
            type="password"
            placeholder="Password"
          />
        </Form.Item>
        
        <Form.Item>
          <Button type="primary" htmlType="submit"
                  className="login-form-button">
            Log in
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};
export default LoginForm